<template>
  <div class="dashboard-container">
    <!-- Icon-class属性，对应文件名 -->
    <svg-icon icon-class="example" />
    <svg-icon icon-class="user" />
    <svg-icon icon-class="tree" />
    <div class="a" />
    <div class="b" />
    <div class="c" @click="handleClick" />
    <div class="dashboard-text">name: {{ name }}</div>
    <p v-for="item in 100" :key="item">{{ item }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    handleClick() {
      console.log(process.env) // 环境
    }
  }
}
</script>

<style lang="scss" scoped>
 @import "~@/styles/mixin.scss";
.a {
  @include myHover(100px, pink, black);
}
.b {
  @include myHover(200px, teal, red);
}
.c {
  @include myHover(300px, skyblue, yellow);
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
